<template>
  <div class="frame-comp">
    <div v-if="shade" class="shade"></div>
    <iframe ref="iframe"
            :id="component.id"
            :style="$PnUtil.cssToVueStyleObj(component.compConfigData.customStyleCode)"
            :src="iframeSrc"
            :width="component.compConfigData.width + component.compConfigData.widthPixelUnit"
            :height="component.compConfigData.height + component.compConfigData.heightPixelUnit"
            :frameborder="component.compConfigData.frameborder"
            :name="component.compConfigData.name"
            :scrolling="component.compConfigData.scrolling">
    </iframe>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'IFrameComp',
    mixins: [FuncCompMixin],
    attr: {
      version: '1.5',
      configDataTemp: Object.assign({

        srcPath: '',

        width: 100,
        widthPixelUnit: '%',
        height: 100,
        heightPixelUnit: '%',
        frameborder: 0,
        name: '',
        scrolling: 'auto',

        eventListeners: [{
          type: 'default',
          runJsCode: ''
        }],

        designPhaseNotLoad: false

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'src',
            remark: '链接地址'
          }
        ],
        ds_resultObj: [
          {
            "src": ""
          }
        ],
        ds_useFilter: true
      }), PnDesigner.buildFuncCompGlobalField())
    },
    data() {
      return {
        iframeWin: {}
      }
    },
    mounted() {
      this.init();
      this.registerEventListener()
    },
    methods: {
      init () {
        this.iframeWin = this.$refs.iframe.contentWindow;
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        })
      },

      registerEventListener () {
        let _this = this;
        window.addEventListener('message', (e) => {
          const data = e.data;
          if (this.component.compConfigData.eventListeners.length > 0) {
            this.component.compConfigData.eventListeners.forEach(eventListener => {
              if (data.type == eventListener.type) {
                eval(eventListener.runJsCode)
              }
            })
          }
          // switch (data.cmd) {
          //   case 'returnFormJson':
          //     // 业务逻辑
          //     break
          //   case 'returnHeight':
          //     console.log(data)
          //     break
          // }
        })
      }
    },
    computed: {
      iframeSrc () {
        if (!this.$store.state.release.pageMetadata) {
          if (this.component.compConfigData.designPhaseNotLoad) {
            return 'about:blank'
          }
        }
        return this.component.compConfigData.srcPath ? this.component.compConfigData.srcPath : this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].src
      }
    }
  };

  export default _this
</script>

<style scoped>
  .frame-comp {
    width: 100%;
    height: 100%;
    position: relative;
  }
</style>
